<template>
  <div class="container">
    <div class="loginCard">
      <div class="left">
        <img
          class="loginCardLogo"
          src="../../assets/images/loginCardLogo.png"
          alt="logo"
        />
        <img
          class="loginCardImg"
          src="../../assets/images/loginCardImg.png"
          alt="bgImg"
        />
      </div>
      <div class="right">
        <div class="title">
          <div>东方电气-文件管理</div>
          <span>Dongfang Electric document management</span>
        </div>
        <div class="loginForm">
          <a-form-Model
            :model="loginForm"
            :rules="loginFormRules"
            ref="loginFormRef"
          >
            <a-form-model-item prop="userName">
              <span class="userName">账号</span>
              <a-input
                placeholder="请输入账号"
                v-model="loginForm.userName"
              ></a-input>
            </a-form-model-item>
            <a-form-model-item prop="password">
              <span class="passWd">密码</span>
              <a-input
                placeholder="请输入密码"
                type="password"
                v-model="loginForm.password"
              ></a-input>
            </a-form-model-item>
            <!-- <a-form-model-item>
            <a-checkbox v-model="checked">
              <span class="checkText">记住密码</span>
            </a-checkbox>
            </a-form-model-item>-->
            <a-form-model-item>
              <a-button type="primary" @click="submit" :loading="loginLoading">
                <span class="btnText">登陆</span>
              </a-button>
            </a-form-model-item>
          </a-form-Model>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserInfo } from '../../api/login'
// import CryptoJs from 'crypto-js'
export default {
  data() {
    return {
      loginLoading: false,
      // checked: false,
      loginForm: {
        userName: '',
        password: ''
      },
      loginFormRules: {
        userName: [
          { required: true, message: '用户名不能为空', tigger: 'blur' }
        ],
        password: [{ required: true, message: '密码不能为空', tigger: 'blur' }]
      }
    }
  },
  mounted() {
    // 得到cookie
    // this.getCookie()
    // 判断是否已记住密码,若已记住则将记住密码选中,若未选中则不选
    // if (this.loginForm.userName !== '' && this.loginForm.password !== '') {
    //   this.checked = true
    // } else {
    //   this.checked = false
    // }
  },
  methods: {
    submit() {
      const vm = this
      console.log('11111111111111111111')
      vm.$refs.loginFormRef.validate((valid) => {
        if (!valid) return
        vm.loginLoading = true
        getUserInfo(vm.loginForm).then((res) => {
          console.log('222222222222222222222222222222', res)
          if (res.code === 200) {
            // if (vm.checked === true) {
            //   // 传入账号名，密码，和保存天数3个参数
            // vm.setCookie(vm.loginForm.userName, vm.loginForm.password, 7)
            // } else {
            //   vm.clearCookie()
            // }
            vm.loginLoading = false
            const span = document.querySelector('.btnText')
            console.log('span', span)
            span.innerHTML = '登陆中'

            console.log('loginRes', res.data)
            vm.$message.success('登陆成功')
            sessionStorage.setItem('data', JSON.stringify(res))
            vm.$router.push({
              path: '/Index'
              // query: { isAdmin: isAdmin, userId: userId }
            })
            span.innerHTML = '登陆'
          } else {
            vm.$message.error('登陆失败!请检查账号密码后重试')
            vm.loginLoading = false
          }
        })
      })
    }
    // // 设置cookie
    // setCookie(cname, cpwd, exdays) {
    //   // 使用crypto.js 对账号密码进行加密
    //   const encryptName = CryptoJs.AES.encrypt(
    //     cname + '',
    //     'daizhenping'
    //   ).toString()
    //   const encryptPWd = CryptoJs.AES.encrypt(
    //     cpwd + '',
    //     'daizhenping'
    //   ).toString()
    //   var exdate = new Date() // 获取时间
    //   exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
    //   // 字符串拼接cookie 'U2'表示 userName ; 'a0'表示 passwd
    //   window.document.cookie =
    //     'U2' + '==' + encryptName + ';path=/;expires=' + exdate.toGMTString()
    //   window.document.cookie =
    //     'a0' + '==' + encryptPWd + ';path=/;expires=' + exdate.toGMTString()
    // },
    // // 读取cookie
    // getCookie: function () {
    //   if (document.cookie.length > 0) {
    //     var arr = document.cookie.split('; ')
    //     for (var i = 0; i < arr.length; i++) {
    //       var arr2 = arr[i].split('==') // 再次切割
    //       // 判断查找相对应的值
    //       if (arr2[0] === 'U2') {
    //         const temCname = CryptoJs.AES.decrypt(arr2[1], 'daizhenping')
    //         this.loginForm.userName = temCname.toString(CryptoJs.enc.Utf8) // 解密之后将字符串赋值给账号
    //       } else if (arr2[0] === 'a0') {
    //         const temCpwd = CryptoJs.AES.decrypt(arr2[1], 'daizhenping')
    //         this.loginForm.password = temCpwd.toString(CryptoJs.enc.Utf8)
    //       }
    //     }
    //   }
    // },
    // // 清除cookie
    // clearCookie: function () {
    //   this.setCookie('', '', -1) // 修改2值都为空，天数为负1天
    // }
  }
}
</script>
<style scoped>
.container {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  padding: 90px 0 0 0;
  background: url('../../assets/images/loginBackground.png') no-repeat;
  background-size: 100%;
}
.container .loginCard {
  display: flex;
  margin: 0 auto;
  width: 919px;
  height: 589px;
  background-color: #fff;
}
/* 登录Card左边 */
.container .loginCard .left {
  position: relative;
  width: 478px;
  padding: 41px 58px 95px 5px;
  background-color: #edf4fc;
}
.left .loginCardLogo {
  width: 184px;
  height: 44px;
}
.left .loginCardImg {
  position: absolute;
  bottom: 95px;
  right: 58px;
  height: 309px;
  width: 369px;
}
/* 登录Card右边 */
.container .loginCard .right {
  width: 441px;
  padding: 94px 74px 0 74px;
  /* padding: 0 75px 0 73px; */
}
.loginCard .right .title div {
  margin-bottom: 8px;
  font: bold 20px 'PingFang SC';
  color: #122853;
}
.loginCard .right .title span {
  font: medium 14px 'PingFang SC';
  color: #9ca5b8;
}
.loginCard .right .loginForm {
  margin-top: 54px;
}
.right .loginForm .ant-input {
  border: 1px solid #2c5bb9;
}
.loginForm .ant-form-item:nth-child(3) {
  margin-top: 46px;
}
.loginCard .right .loginForm .passWd,
.loginCard .right .loginForm .userName {
  font: bold 18px 'PingFang SC';
  color: #122853;
}
.loginCard .right .loginForm .ant-btn {
  height: 36px;
  width: 100px;
  border: none;
  background-color: #2c5bb9;
}
.loginCard .right .loginForm .ant-btn .btnText {
  font-family: 'PingFang SC';
  font-size: 16px;
  font-weight: medium;
}
</style>
